<template>
  <Layout>
    <Row :gutter="24">
      <Col span=6>
        <Card class="statistics-card" id="statistics-card-1">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>两年内问题总数</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ totalMap.totalNum }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <a class="statistcs-text-a" @click.prevent="notNumSubmit">未闭环问题数量</a>
            </Col>
            <Col span="8" class="statistics-text-content">
              <a class="statistcs-text-a" @click.prevent="notNumSubmit">{{ totalMap.notNum }}</a>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="totalMap.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ totalMap.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span=6>
        <Card class="statistics-card" id="statistics-card-2">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <a class="statistcs-text-a" @click.prevent="focusOnNumMethod">集团督办</a>
            </Col>
            <Col span="8" class="statistics-text-content">
              <a class="statistcs-text-a" @click.prevent="focusOnNumMethod">{{ superviseMap.focusOnNum }}</a>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <a class="statistcs-text-a" @click.prevent="followNumMethod">二级集团督办</a>
            </Col>
            <Col span="8" class="statistics-text-content">
              <a class="statistcs-text-a" @click.prevent="followNumMethod">{{ superviseMap.followNum }}</a>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="superviseMap.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ superviseMap.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="6">
        <Card class="statistics-card" id="statistics-card-3">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <a class="statistcs-text-a" @click.prevent="notCompletedMethod">超期未完成</a>
            </Col>
            <Col span="8" class="statistics-text-content">
              <a class="statistcs-text-a" @click.prevent="notCompletedMethod">{{ notCompletedMap.notCompleted }}</a>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg" style="height: 27px;">
            <Col span="15" class="statistics-text-title">

            </Col>
            <Col span="8" class="statistics-text-content">

            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="notCompletedMap.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ notCompletedMap.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="6">
        <Card class="statistics-card" id="statistics-card-4">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <a class="statistcs-text-a" @click.prevent="notCompleted3Method">超三个月未闭环</a>
            </Col>
            <Col span="8" class="statistics-text-content">
              <a class="statistcs-text-a" @click.prevent="notCompleted3Method">{{ notCompleted3Map.notCompleted3M }}</a>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg" style="height: 27px;">
            <Col span="15" class="statistics-text-title">

            </Col>
            <Col span="8" class="statistics-text-content">

            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="notCompleted3Map.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ notCompleted3Map.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
    <Form ref="form1" :model="dataToQuery" :label-width="120" style="margin-top: 15px">
      <Row class="query-form">
        <Col span="8">
          <FormItem label='二级集团：' prop='belongOrgId'>
            <Select class='w' placeholder="二级集团" v-model='dataToQuery.belongOrgId'>
              <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="单位名称：" prop="order">
            <!--            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname="setOrgName"-->
            <!--                          @setOrgInfo='setQueryCompanyName' :orgTree="true"-->
            <!--                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
            <company-select v-model="dataToQuery.companyName" class="query-form-el"></company-select>
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true,88)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label='问题类别：' prop='problemCategory'>
            <Select v-model="dataToQuery.problemCategory" v-if="accountType == '2'">
              <Option v-for="item in environmentProtectionList" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
            <Select v-model="dataToQuery.problemCategory" v-if="accountType == '1'">
              <OptionGroup label="基础管理">
                <Option v-for="item in sceneList" :value="item.codingCodeId" :key="item.codingCodeId">
                  {{ item.codingName }}
                </Option>
              </OptionGroup>
              <OptionGroup label="现场管理">
                <Option v-for="item in basicList" :value="item.codingCodeId"
                        :key="item.codingCodeId">{{ item.codingName }}
                </Option>
              </OptionGroup>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="问题来源：">
            <Select v-model='dataToQuery.problemSource' clearable class='query-form-el'>
              <Option v-for="item in saProbemSource" :value="item.value" v-if="accountType == '1'"
                      :key="item.value">{{ item.name }}
              </Option>
              <Option v-for="item in enProbemSource" :value="item.value" v-if="accountType == '2'"
                      :key="item.value">{{ item.name }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="督办：">
            <Select v-model='dataToQuery.grading' clearable class='query-form-el'>
              <Option value="FOCUS_ON">集团督办</Option>
              <Option value="FOLLOW">二级集团督办</Option>
              <Option value="NO_FOLLOW">未督办</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="检查级别：">
            <Select v-model='dataToQuery.checkLevel' clearable class='query-form-el'>
              <Option value="GOVERNMENT">政府</Option>
              <Option value="GROUP">集团</Option>
              <Option value="TWO_GROUP">二级集团</Option>
              <Option value="COMPANY">企业</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="当前状态：" prop="order">
            <Select v-model='dataToQuery.state' :max-tag-count="2" multiple clearable class='query-form-el'>
              <Option value="NOT_RECTIFIED">待整改</Option>
              <Option value="START">整改中</Option>
              <Option value="DELAY">延期</Option>
              <Option value="OPEN">完成</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="检查日期：" prop="checkTime">
            <DatePicker v-model="checkTime" type="daterange" split-panels placeholder="请选择"
                        style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(false,88)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="rester" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>

    </Form>
    <Row class="query-form">
      <Col span="24">
        <download-button :api="exportUrl" :query-form="dataToQuery" :post="true"
                         :export-form-before="queryForm"/>
      </Col>
    </Row>
    <Table ref='table' style="margin-top: 10px" :height="tableHeight" no-data-text="没有查询到相关数据!"
           @on-selection-change='getSelectRows' :loading='pageStatus.loading' border :columns="columns1"
           @on-sort-change="sortChange"
           :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="this.getModalTitle(this.accountType == '1'?'安全问题':'环保问题')" :transfer=false :mask-closable="false"
           v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?130:null"
                :label-position="mode === 'view'?'right':'top'">

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='问题来源：' prop='problemSourceDesc'>
                  <div>{{ renderViewProblemSource(dataToView.problemSource) }}</div>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='问题类别：' prop='problemCategoryName'>
                  <div>{{ dataToView.problemCategoryName }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='问题描述：' prop='problemDesc'>
                  <div>{{ dataToView.problemDesc }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='检查级别：' prop='checkLevelDesc'>
                  <div>{{ dataToView.checkLevelDesc }}</div>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='检查时间：' prop='checkTime'>
                  <div>{{ renderViewDate(dataToView.checkTime) }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='完成时限：' prop='completeTime'>
                  <div>{{ renderViewDate(dataToView.completeTime) }}</div>
                </FormItem>
              </Col>
              <Col span="11"></Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='整改方案：' prop='rectifyPlan'>
                  <div>{{ dataToView.rectifyPlan }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="整改附件：">
                  <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='当前进展描述：' prop='completion'>
                  <div>{{ dataToView.completion }}</div>
                </FormItem>
              </Col>
            </Row>
            <!--                        <Row type="flex" justify="space-around" class="code-row-bg">
                                        <Col span="11">
                                            <FormItem label='整改人：' prop='rectifyUserName'>
                                                <div>{{ dataToView.rectifyUserName }}</div>
                                            </FormItem>
                                        </Col>
                                        <Col span="11">
                                            <FormItem label='环保部门责任人：' prop='depHeadName'>
                                                <div>{{ dataToView.depHeadName }}</div>
                                            </FormItem>
                                        </Col>
                                    </Row>-->
            <Row type="flex" justify="space-around" class="code-row-bg" v-if="dataToView.grading!=='NO_FOLLOW'">
              <Col span="11">
                <FormItem label='督办：' prop='grading'>
                  <div>{{ dataToView.gradingDesc }}</div>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='督办人：' prop='gradingUserId'>
                  <div>{{ dataToView.gradingUserName }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" v-if="dataToView.progressList.length>0">
              <Col span="23">
                <b>督办问题进展：</b>
                <Table :columns="progressColumns" :data="dataToView.progressList"></Table>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
        </Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import {formatDate} from "@/tools";

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {
    cascaderDom
  },
  data() {
    return {
      ...this.createCommonDataField(),
      checkTime: ['', ''],
      columns1: [
        {title: '序号', width: 65, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'stateDesc', title: '当前状态', align: 'center', minWidth: 100, fixed: 'left',},
        {
          key: 'gradingDesc', title: '督办', align: 'center', minWidth: 150, fixed: 'left',
          render: (h, params) => {
            if (params.row.grading === 'NO_FOLLOW' || !params.row.grading) {
              return h('Icon', {
                props: {
                  type: 'ios-star',
                  size: 25,
                }
              });
            } else {
              return h('Icon', {
                props: {
                  type: 'ios-star',
                  size: 25,
                  color: params.row.grading === "FOCUS_ON" ? 'red' : params.row.grading === "FOLLOW" ? '#FFB826' : '',
                }
              });
            }

          }
        },
        {key: 'companyName', title: '单位名称', align: 'center', minWidth: 200,},
        {key: 'problemCategoryName', title: '问题类别', align: 'center', minWidth: 120,},
        {key: 'problemDesc', title: '问题描述', align: 'center', minWidth: 120, tooltip: true},
        {
          key: 'problemSource',
          title: '问题来源',
          align: 'center',
          minWidth: 120,
          render: this.renderCellProblemSource
        },
        {key: 'checkLevelDesc', title: '检查级别', align: 'center', minWidth: 110,},
        {
          key: 'checkTime',
          title: '检查时间',
          sortable: "custom",
          align: 'center',
          minWidth: 120,
          render: this.renderCellDate
        },
        {
          key: 'completeTime',
          title: '完成时限',
          sortable: "custom",
          align: 'center',
          minWidth: 120,
          render: this.renderCellDate
        },
        {key: 'gradingUserName', title: '督办人', align: 'center', minWidth: 100,},
        {key: 'rectifyPlan', title: '整改方案', align: 'center', minWidth: 120, tooltip: true},
        {key: 'completion', title: '当前进展描述', align: 'center', minWidth: 100, tooltip: true},
        // { key:'rectifyUserName',title: '整改人',  align: 'center', minWidth: 100,  },
        // { key:'depHeadName',title: '环保部门责任人',  align: 'center', minWidth: 100,  },
        {key: 'belongOrgName', title: '所属二级集团', align: 'center', minWidth: 200,},
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 190,
          align: 'center',
          render: (h, params) => {
            let flag = this.Common.belongOrgId.indexOf(this.currentUser.companyId) > 0 || this.currentUser.companyId === this.Common.jinyuOrgId
            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px',},
                on: {
                  click: () => {
                    this.viewData(params);
                  }
                }
              }, '详情'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {
                  fontSize: '14px',
                  color: !flag ? '#d0d0d0' : 'red',
                  pointerEvents: !flag ? 'none' : ''
                },
                on: {
                  click: () => {
                    if (params.row.grading === 'FOCUS_ON' && (this.currentUser.orgInfo.orgId !== '18000000' && this.currentUser.companyId !== '18000000')) {
                      this.$Message.warning('集团领导已经督办，不能重新督办');
                    } else {
                      let data = {
                        id: params.row.id,
                        //本部领导层 重点关注
                        grading: this.currentUser.companyId === '18000000' || this.currentUser.orgInfo.orgId === '18000000' ? 'FOCUS_ON' : 'FOLLOW',
                        gradingUserId: this.currentUser.userId
                      }
                      console.log(this.currentUser);
                      this.$Modal.confirm({
                        title: '提示',
                        content: '<p>确认督办？</p>',
                        onOk: () => {
                          this.$http.put(this.superviseUrl, data).then((res) => {
                            if (res.data.status === 200) {
                              this.$Message.success('督办成功');
                              this.query()
                            } else if (res.data.status === 201) {
                              this.$Message.error("督办失败");
                            }
                          }).catch(e => {
                            this.$Message.error('督办失败' + e);
                          })
                        },
                        onCancel: () => {
                        }
                      });
                    }
                  }
                }
              }, '督办'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px',},
                on: {
                  click: () => {
                    //  跳转到具体页面
                    this.toPath(params.row)
                  }
                }
              }, '问题明细'),
            ]);
          }
        }
      ],
      ruleCustom: {},
      sceneList: [],
      basicList: [],
      accountType: '',
      totalMap: {},
      enProbemSource: [
        {name: "现场审核验收", value: "SOURCE_5"},
        {name: "公司内部监督检查", value: "SOURCE_3"},
        {name: "环保隐患整改通知单", value: "SOURCE_2"},
        {name: "环保监督情况报送表", value: "SOURCE_1"},
      ],
      saProbemSource: [
        {name: "安全审计", value: "SOURCE_6"},
        {name: "公司内部监督检查", value: "SOURCE_3"},
        {name: "安全隐患整改通知单", value: "SOURCE_2"},
        {name: "安全监督情况报送表", value: "SOURCE_1"},
      ],
      superviseMap: {},
      notCompleted3Map: {},
      notCompletedMap: {},
      progressColumns: [
        {title: '序号', width: 65, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {title: '填报时间', align: 'center', key: 'createDate', width: 100, render: this.renderCellDate},
        {title: '进展说明', align: 'center', key: 'progressDesc', minWidth: 100,},
        {title: '下一步计划', align: 'center', key: 'planDesc', minWidth: 100,},
      ],
      tableHeight: 10,
      // api
      queryUrl: Api.queryQuestionAccount,
      exportUrl: Api.exportQuestionAccount,
      updateUrl: Api.updateQuestionAccount,
      superviseUrl: Api.superviseQuestionAccount,

      currentUser: JSON.parse(sessionStorage('userId').get('userId')),

      twoLevel: [],
      environmentProtectionList: []
    }
  },
  mounted() {
    console.log("monted start")
    this.accountType = this.$route.query.accountType;
    this.enProbemSourceMap = this.dictListToMap(this.enProbemSource, 'value')
    this.saProbemSourceMap = this.dictListToMap(this.saProbemSource, 'value')
    this.setTableHeight();
    this.query();
    this.$http.get(Api.queryCodeDetailBySortId + '/NOT-00006', {params: {}}).then((res) => {
      this.environmentProtectionList = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySuperiorcode + '/NOT-00007000000004', {params: {}}).then((res) => {
      this.sceneList = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySuperiorcode + '/NOT-00007000000001', {params: {}}).then((res) => {
      this.basicList = res.data.data;
    });
    this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
      this.twoLevel = res.data.data
    })
  },
  methods: {
    ...pageCommonFunction,
    queryForm(data) {
      data.accountType = this.$route.query.accountType
      if (this.checkTime[0] && this.checkTime[1]) {
        data.checkTime = [formatDate(this.checkTime[0], 'yyyy-MM-dd'), formatDate(this.checkTime[1], 'yyyy-MM-dd')]
      }
    },
    notNumSubmit() {
      this.dataToQuery = {};

      this.dataToQuery.state = ['START', 'DELAY', 'NOT_RECTIFIED'];
      this.query();
    },
    focusOnNumMethod() {
      this.dataToQuery = {};

      this.$set(this.dataToQuery, 'grading', 'FOCUS_ON')
      this.query();
    },
    followNumMethod() {
      this.dataToQuery = {};

      this.$set(this.dataToQuery, 'grading', 'FOLLOW')
      this.query();
    },
    notCompletedMethod() {
      this.dataToQuery = {};

      this.dataToQuery.notCompleted = '1'
      this.query();
    },
    notCompleted3Method() {
      this.dataToQuery = {};

      this.dataToQuery.notCompleted3M = '1'
      this.query();
    },
    rester() {
      this.checkTime = ['', ''];
      this.reset();
    },

    toPath(data) {
      console.log(data);
      if (data.problemSource == 'SOURCE_1') {
        if (this.accountType == '1') {
          this.$router.push({path: '/safeSuperviseInspectRpt', query: {id: data.priBusinessId}});
        } else {
          this.$router.push({path: '/envSuperviseInspectRpt', query: {id: data.priBusinessId}});
        }
      } else if (data.problemSource == 'SOURCE_2') {
        if (this.accountType == '1') {
          this.$router.push({path: '/companyNotice?noticeCategory=1&type=1', query: {id: data.priBusinessId}});
        } else {
          this.$router.push({path: '/companyNotice?noticeCategory=2&type=1', query: {id: data.priBusinessId}});
        }
      } else if (data.problemSource == 'SOURCE_3') {
        if (this.accountType == '1') {
          this.$router.push({path: 'saSuperviseInspectRpt?id=2', query: {prId: data.priBusinessId}});
        } else {
          this.$router.push({path: 'saSuperviseInspectRpt?id=1', query: {prId: data.priBusinessId}});
        }
      } else if (data.problemSource == 'SOURCE_4') {
        this.$router.push({path: '/problemRectifyDetails', query: {id: data.priBusinessId, type: 0}});
      } else if (data.problemSource == 'SOURCE_5') {
        this.$router.push({path: '/problemRectifyDetails', query: {id: data.priBusinessId, type: 1, businessId:data.businessId}});
      } else if (data.problemSource == 'SOURCE_6') {
        this.$http.get(Api.getProblemRect + data.priBusinessId).then((res) => {
          if (res.data.status == 200) {
            let adtMission = res.data.data;
            if (adtMission) {
              adtMission.businessId = data.businessId;
              this.$router.push({path: '/problemRectItem', query: adtMission});
            } else {
              this.$Message.error("该问题不存在！")
            }

          } else {
            this.$Message.error(res.data.msg);
          }
        });

      }

    },
    query() {
      this.dataToQuery.accountType = this.$route.query.accountType
      this.queryAjax();
    },
    renderViewProblemSource(data) {
      if (!data) return "";
      if (this.accountType == '1') {
        return this.saProbemSourceMap[data]['name']
      } else {
        return this.enProbemSourceMap[data]['name']
      }
    },
    setOrgName(data) {
      this.$set(this.dataToQuery, "companyName", data);
    },
    renderCellProblemSource(h, params) {
      let key = params.column.key;
      if (!params.row[key]) return "";
      if (this.accountType == '1') {
        return h('span', this.saProbemSourceMap[params.row[key]]['name']);
      } else {
        return h('span', this.enProbemSourceMap[params.row[key]]['name']);
      }
      // return h('span', formatDate(new Date(params.row[key]), "yyyy-MM-dd"))
    },
    queryAjax() {
      this.pageStatus.loading = true
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        conditions: this.dataToQuery
      };

      this.$http.post(this.queryUrl, data).then((res) => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        this.totalMap = res.data.data.totalMap;
        this.superviseMap = res.data.data.superviseMap;
        this.notCompleted3Map = res.data.data.notCompleted3Map;
        this.notCompletedMap = res.data.data.notCompletedMap;
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.pageStatus.loading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
        this.pageStatus.loading = false
      })
    },

    submit(name) {
      this.submitAjax(name);
    },

    async afterDataToViewInit() {
      await this.getFiles1('id', 'EnQuestionDetailForApproval');
    },
  },
  watch: {
    checkTime: {
      handler(nv) {
        // this.dataToQuery.checkTime = nv;
        if (nv[0] && nv[1]) {
          this.$set(this.dataToQuery, 'checkTime', [formatDate(nv[0], 'yyyy-MM-dd'), formatDate(nv[1], 'yyyy-MM-dd')])
        }
        console.log(nv);

      },


    },
  },
}
</script>

<style lang='css' scoped>
.ivu-form-item {
  padding-right: 20px;
}

.query-form-el, .ivu-date-picker, .ivu-input-wrapper {
  width: 100%;
}

.demo-upload-list {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.statistics-card {
  width: 100%;
  height: 112px;

}

#statistics-card-1 {
  background-image: url(img/red_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

#statistics-card-2 {
  background-image: url(img/yellow_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

#statistics-card-3 {
  background-image: url(img/blue_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

#statistics-card-4 {
  background-image: url(img/green_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

.statistics-text-title {
  font-size: 18px;
  font-family: HiraginoSansGB-W6;
  font-weight: normal;
  color: #FFFFFF;
  line-height: 27px;
  text-align: left;
  letter-spacing: 1px;
}

.statistcs-text-a {
  color: #FFFFFF;
}

.statistcs-text-a:hover {
  color: #f3f2f2;
}

.statistics-text-content {
  font-size: 18px;
  font-family: HiraginoSansGB;
  font-weight: normal;
  color: #FFFFFF;
  text-align: right;
  line-height: 27px;
  letter-spacing: 1px;
}

>>> .ivu-progress-bg {
  background-color: #FFFFFF;
}

>>> .ivu-progress-inner {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
</style>
